<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 vue.js 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/element.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios.js-->
    <script src="/js/axios.min.js"></script>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/js/echarts.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box-card{
            width: 100%;
            box-sizing: border-box;
        }

        @media (min-width: 600px) {
            .box-card{
                width: 100%;
            }
        }

        .box-card {
            float: left;

        }

        /*.box-kard {
            float: right;
        }*/
    </style>
</head>
<body>


<div id="app">
    <el-card class="box-card">
        <div id="main" style="width: 1000px;height:600px;"></div>
    </el-card>

    <el-card class="box-kard">
        <div id="max" style="width: 0px;height:0px;"></div>
    </el-card>


</div>
<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                timer: null // 定时器ID
            }
        },
        mounted() {
            this.drawLine();
            this.startTimer(); // 开始定时器
        },
        destroyed() {
            this.stopTimer(); // 组件销毁时停止定时器
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById('main'));
                const maxChart = echarts.init(document.getElementById('max'));
                // 定义中文名称
                const nameMap = {
                    '1': '新增',
                    '2': '修改',
                    '3': '删除'
                };

                option = {
                    title: {
                        text: '用户操作数据图',
                        subtext: '增删改数据可视化',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }

                            }
                        }
                    ]
                };

                option1 = {
                    title: {
                        text: '用户登录数据'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '登录人数',
                            type: 'line',
                            stack: 'Total',
                            data: []
                        },
                    ]
                };
                const updateData = () => {
                    axios.get('/OperLog/count').then(res => {
                        console.log(res)
                        res.data.data.forEach(item => {
                            //处理后台数据格式
                            const name = nameMap[item.businessType] || '其他';
                            option.series[0].data.push({name, value: item.count})
                            /*    option.series[0].data.push({name: item.businessType, value: item.count})*/
                        })
                        // 绘制图表
                        myChart.setOption(option);

                    })

                   /* axios.get('/loginlog/count').then(res => {
                        console.log(res)
                        res.data.data.forEach(item => {
                            //处理后台数据格式
                            option1.xAxis.data = res.data.data?.map(v => v.wek) || []
                            option1.series[0].data = res.data.data?.map(v => v.count) || []
                        })

                        // 使用刚指定的配置项和数据显示图表。
                        maxChart.setOption(option1);
                    })*/
                }

                updateData();
            },
            startTimer() {
                this.timer = setInterval(() => {
                    this.drawLine();
                }, 60000); // 每60秒更新一次数据
            },
            stopTimer() {
                clearInterval(this.timer);
            }
        }
    })

</script>
</body>
</html>